<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false" fullscreen>
		<el-steps :active="activeIndex" finish-status="success" simple style="margin-top: 20px">
			<el-step title="基本配置"></el-step>
			<el-step title="字段配置"></el-step>
		</el-steps>
		<div v-if="activeIndex == 1" class="basicD">
			<el-form ref="form" :model="form" :rules="rules">
				<el-form-item label="模型标题" :label-width="formLabelWidth" prop="title">
					<el-input v-model="form.title" autocomplete="off" placeholder="请输入模型标题"></el-input>
				</el-form-item>
				<el-form-item label="模型编码" :label-width="formLabelWidth" prop="code">
					<el-input
						v-model="form.code"
						autocomplete="off"
						placeholder="请输入模型编码"
						:disabled="form.id ? true : false"
					></el-input>
				</el-form-item>
				<el-form-item label="状态" :label-width="formLabelWidth" prop="status">
					<el-switch
						v-model="form.status"
						active-color="#13ce66"
						inactive-color="#ff4949"
						:active-value="1"
						:inactive-value="2"
					></el-switch>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
				<el-button style="margin-top: 12px" @click="next">下一步</el-button>
			</div>
		</div>
		<div v-else class="columnD">
			<el-button
				type="primary"
				size="medium"
				icon="el-icon-plus"
				v-if="$tools.hasPermission('cms:cmsColConfig:save')"
				@click="handleEdit()"
			>
				添加
			</el-button>
			<el-table ref="multipleTable" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border>
				<el-table-column prop="colTitle" label="字段标题" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="colName" label="字段名" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="propName" label="标签引用名" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="formType" label="表单类型" :show-overflow-tooltip="true" :formatter="formTypeFmt"></el-table-column>
				<el-table-column
					prop="isFormRequire"
					label="是否必填"
					:show-overflow-tooltip="true"
					:formatter="isFormRequireFmt"
				></el-table-column>
				<el-table-column
					prop="validateType"
					label="校验类型"
					:show-overflow-tooltip="true"
					:formatter="validateTypeFmt"
				></el-table-column>

				<el-table-column prop="listdataConfig" label="数据集" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" fixed="right" min-width="180">
					<template slot-scope="scope">
						<el-button
							v-if="!scope.row.isSys && $tools.hasPermission('cms:cmsColConfig:edit')"
							size="mini"
							plain
							@click="handleEdit(scope.row)"
						>
							编辑
						</el-button>
						<el-button
							v-if="!scope.row.isSys && $tools.hasPermission('cms:cmsColConfig:delete')"
							size="mini"
							plain
							type="danger"
							@click="handleDelete(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination :total="page.total" :current-page="page.current" :page-size="page.size" @refreshData="queryList"></pagination>
			<!-- 新增、编辑 -->
			<form-edit v-if="formEditVisible" ref="formEdit" @refreshData="refreshCols"></form-edit>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
				<el-button style="margin-top: 12px" @click="pre">上一步</el-button>
				<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script>
import { cmsmodelInfo, cmsmodelSave, cmsmodelEdit, cmsmodelFields } from "@/api/cms/cmsmodel.js"
import FortressPagination from "@/components/fortress-pagination.vue"
import { enumList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"
import FormEdit from "./cmscolconfig-edit"
export default {
	data() {
		return {
			visible: false,
			activeIndex: 1,
			form: {
				id: "",
				title: "",
				code: "",
				status: "1",
				sysCols: [],
				cols: [],
			},
			allCols: [],
			formLabelWidth: "120px",
			rules: {
				title: [{ required: true, message: "请输入标题", trigger: "blur" }],
				code: [
					{ required: true, message: "请输入编码", trigger: "blur" },
					{ validator: ftVal.validateAlphabets, trigger: "blur" },
				],
			},
			YesNoList: [],

			//字段配置
			tableData: [],
			queryForm: {
				modelId: "",
			},
			page: {
				current: 1,
				size: 10,
				total: 0,
			},
			collapse: {
				icon: "el-icon-arrow-down el-icon--right",
				label: "展开",
				flag: false,
			},
			formEditVisible: false,
			tableShowList: [],
			ValidateTypeList: [],
			ViewFormTypeList: [],
			tableIndex: 1,
		}
	},
	created() {
		this.queryEnumList()
	},
	components: {
		"form-edit": FormEdit,
		pagination: FortressPagination,
	},
	methods: {
		queryEnumList() {
			this.YesNoList = []
			enumList("YesNo", "").then(resp => {
				if (resp.code == 0) {
					this.YesNoList = resp.data
				}
			})
			this.ValidateTypeList = []
			enumList("ValidateType", "").then(resp => {
				if (resp.code == 0) {
					this.ValidateTypeList = resp.data
				}
			})
			this.ViewFormTypeList = []
			enumList("ViewFormType", "").then(resp => {
				if (resp.code == 0) {
					this.ViewFormTypeList = []
					resp.data.forEach(item => {
						if (item.code != "12") {
							this.ViewFormTypeList.push(item)
						}
					})
				}
			})
		},
		init(id) {
			this.resetForm()
			//修改
			if (id) {
				this.form.id = id
				cmsmodelInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
							this.form.sysCols = resp.data.sysCols ? resp.data.sysCols : []
							this.form.cols = resp.data.cols ? resp.data.cols : []
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			} else {
				cmsmodelFields().then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form.sysCols = resp.data.sysCols ? resp.data.sysCols : []
						})
					}
				})
			}
			this.visible = true
		},

		resetForm() {
			this.form = {
				id: "",
				title: "",
				code: "",
				status: 1,
				sysCols: [],
				cols: [],
			}
			this.tableData = []
			this.activeIndex = 1
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
		//上一步
		pre() {
			this.activeIndex = 1
		},
		//下一步
		next() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					this.activeIndex = 2
					this.queryList()
				}
			})
		},
		//表格数据格式化 start
		isFormRequireFmt(row) {
			let name = "禁用"
			if (row.isFormRequire == 1) {
				name = "启用"
			}
			return name
		},
		//校验类型格式化返回
		validateTypeFmt(row) {
			let name = ""
			if (this.ValidateTypeList) {
				this.ValidateTypeList.forEach(item => {
					if (item.code == row.validateType) {
						name = item.name
					}
				})
			}
			return name
		},
		//表单类型格式化返回
		formTypeFmt(row) {
			let name = ""
			if (this.ViewFormTypeList) {
				this.ViewFormTypeList.forEach(item => {
					if (item.code == row.formType) {
						name = item.name
					}
				})
			}
			return name
		},
		//表格数据格式化 end

		//打开编辑窗口
		handleEdit(row) {
			this.formEditVisible = true
			this.$nextTick(() => {
				if (row && !row.modelId && this.form.id) {
					row.modelId = this.form.id
				}
				this.$refs.formEdit.init(row)
			})
		},
		//查询表格数据
		queryList(page) {
			if (page) {
				this.page.current = page.current ? page.current : this.page.current
				this.page.size = page.size ? page.size : this.page.size
			}
			if (this.form.cols) {
				this.allCols = this.form.cols.concat(this.form.sysCols)
			} else {
				this.allCols = this.form.sysCols
			}
			if (this.allCols) {
				let start = (this.page.current - 1) * this.page.size
				let end =
					this.page.current * this.page.size > this.allCols.length ? this.allCols.length : this.page.current * this.page.size
				this.tableData = this.allCols.slice(start, end)
				this.page.total = this.allCols.length
				//查询页大于总页数，重新查询
				let cu =
					this.page.total % this.page.size == 0
						? parseInt(this.page.total / this.page.size)
						: parseInt(this.page.total / this.page.size + 1)
				if (cu > 0 && this.page.current > cu) {
					this.queryList({ current: cu })
				}
			}
		},

		//编辑后提交更新列表
		refreshCols(d) {
			if (this.checkRepeat(d) == 1) {
				this.$msg({
					message: "字段名：" + d.colName + "已存在",
					type: "error",
				})
				return
			}
			if (this.checkRepeat(d) == 2) {
				this.$msg({
					message: "引用名：" + d.propName + "已存在",
					type: "error",
				})
				return
			}
			//修改
			if (d.id) {
				let i = this.form.cols.findIndex(item => {
					return item.id == d.id
				})
				this.form.cols.splice(i, 1, d)
			} else {
				d.id = this.tableIndex++
				this.form.cols.push(d)
			}
			this.queryList()
		},
		//校验字段名和引用名是否重复 0 无重复 1 字段名重复 2 引用名重复
		checkRepeat(row) {
			console.log("checkRepeat", row, this.allCols)
			let d = this.allCols.find(item => {
				return row.colName == item.colName
			})
			if (d && d.id != row.id) {
				return 1
			}
			let d1 = this.allCols.find(item => {
				return row.propName == item.propName
			})
			if (d1 && d1.id != row.id) {
				return 2
			}
			return 0
		},
		//提交表单数据
		submitForm() {
			//修改
			if (this.form.id) {
				cmsmodelEdit(this.form).then(resp => {
					if (resp.code == 0) {
						this.$message({
							type: "success",
							message: "操作成功!",
						})
						this.$emit("refreshData")
						this.visible = false
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
				//新增
			} else {
				cmsmodelSave(this.form).then(resp => {
					if (resp.code == 0) {
						this.$message({
							type: "success",
							message: "操作成功!",
						})
						this.$emit("refreshData")
						this.visible = false
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
		},
		//删除字段
		handleDelete(row) {
			let i = this.form.cols.findIndex(item => {
				return item.id == row.id
			})
			this.form.cols.splice(i, 1)
			this.queryList()
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
.basicD {
	margin-top: 10px;
}
.columnD {
	margin-top: 10px;
}
</style>
